<template>
  <div class="order-main">
    <el-form :inline="true"
             :model="container"
             :rules="orderRules"
             label-position="right"
             ref="ruleForm"
             v-loading="loading"
             class="demo-form-inline">
      <h2 class="gradual">
        客户信息
      </h2>
      <el-form-item label="客户" style="margin-left: 0" prop="customerName">
        <el-select v-model="container.customerName" clearable filterable placeholder="请选择">
          <el-option
              v-for="item in customerOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="客户联系人姓名" prop="customerLinkman">
        <el-input v-model="container.customerLinkman" placeholder="客户联系人姓名"></el-input>
      </el-form-item>
      <el-form-item label="客户联系人手机号" prop="customerMobile">
        <el-input v-model="container.customerMobile" placeholder="客户联系人手机号"></el-input>
      </el-form-item>
      <el-form-item label="客户联系人邮箱" prop="customerEmail">
        <el-input v-model="container.customerEmail" placeholder="客户联系人邮箱"></el-input>
      </el-form-item>
      <el-form-item label="客服" prop="customerServiceName">
        <el-select v-model="container.customerServiceName" clearable filterable placeholder="请选择">
          <el-option
              v-for="item in customerServiceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <h2 class="gradual">
        干线服务
      </h2>
      <el-form-item label="始发站" style="margin-left: 0" prop="departureStationName">
        <el-select v-model="container.departureStationName" clearable filterable placeholder="请选择">
          <el-option
              v-for="item in stationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="口岸站" prop="portStationName">
        <el-select v-model="order.portStationName" clearable filterable placeholder="请选择">
          <el-option
              v-for="item in portStationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="目的站" prop="destinationStationName">
        <el-select v-model="order.destinationStationName" clearable filterable placeholder="请选择">
          <el-option
              v-for="item in stationOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="计划发运日期" prop="trainPlanTransportTime">
        <el-date-picker type="date" clearable  placeholder="选择日期" v-model="order.trainPlanTransportTime"
                        style="width: 100%;"></el-date-picker>
      </el-form-item>
      <h2 class="gradual">
        用箱需求
      </h2>
      <el-form-item label="箱源" prop="containerSource">
        <el-select v-model="order.containerSource" clearable  placeholder="箱源">
          <el-option
              v-for="item in containerSourceOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="用箱方式" prop="useContainerType">
        <el-select v-model="order.useContainerType" clearable  placeholder="用箱方式">
          <el-option
              v-for="item in useContainerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱型" prop="containerType">
        <el-select v-model="order.containerType" clearable  placeholder="箱型">
          <el-option
              v-for="item in containerTypeOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="箱量" prop="containerNum">
        <el-input v-model="order.containerNum" placeholder="箱量"></el-input>
      </el-form-item>
      <h2 class="gradual">收发通信息</h2>
      <el-divider>发货人</el-divider>
      <el-form-item label="姓名">
        <el-input v-model="order.consignerName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="order.consignerAddress" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="order.consignerTel" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="order.consignerEmail" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-divider>收货人</el-divider>
      <el-form-item label="姓名">
        <el-input v-model="order.consigneeName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="order.consigneeAddress" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="order.consigneeTel" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="order.consigneeEmail" placeholder="邮箱"></el-input>
      </el-form-item>
      <el-divider>通知人</el-divider>
      <el-form-item label="姓名">
        <el-input v-model="order.notifierName" placeholder="姓名"></el-input>
      </el-form-item>
      <el-form-item label="地址" >
        <el-input v-model="order.notifierAddress" placeholder="地址"></el-input>
      </el-form-item>
      <el-form-item label="电话">
        <el-input v-model="order.notifierTel" placeholder="电话"></el-input>
      </el-form-item>
      <el-form-item label="邮箱" >
        <el-input v-model="order.notifierEmail" placeholder="邮箱"></el-input>
      </el-form-item>
      <br>
      <el-form-item>
        <div style="margin-left: 500px">
          <el-button type="primary" @click="onSubmit('ruleForm')">立即创建</el-button>
          <el-button @click="resetForm('ruleForm')">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import axios from "axios";
export default {
  data() {
    return {
      container: {
        containerId: 0,
        containerNo: '',
        containerSequence: '',
        containerSizeWeight: '',
        containerSource: '',
        containerTare: 0,
        containerType: '',
        createOrgId: '',
        createOrgName: '',
        createTime: '',
        creator: '',
        creatorName: '',
        delFlag: '',
        departureStationMdm: '',
        departureStationName: '',
        destinationStationMdm: '',
        destinationStationName: '',
        goodsName: '',
        goodsNetWeight: 0,
        goodsQuantity: 0,
        grossWeight: 0,
        modifier: '',
        modifierName: '',
        modifyTime: '',
        orderNo: '',
        portStationMdm: '',
        portStationName: '',
        settlementStatus: '',
        status:''
      },
      containerSourceOptions: [{
        value: 'COC',
        label: 'COC租外运箱'
      }, {
        value: 'SOC',
        label: 'SOC客户自备'
      }],
      useContainerTypeOptions: [{
        value: '租外运箱',
        label: '租外运箱'
      }, {
        value: '代客买箱',
        label: '代客买箱'
      }, {
        value: '租自备箱',
        label: '租自备箱'
      }],
      containerTypeOptions: [{
        value: '20GP',
        label: '20GP'
      }, {
        value: '20RF',
        label: '20RF'
      }, {
        value: '20HC',
        label: '20HC'
      }, {
        value: '40GP',
        label: '40GP'
      }, {
        value: '40HC',
        label: '40HC'
      }, {
        value: '45HC',
        label: '45HC'
      }, {
        value: '40RF',
        label: '40RF'
      }],
      //站点
      stationOptions:[{
        value: '上海港',
        label: '上海港'
      },{
        value: '墨尔本',
        label: '墨尔本'
      },{
        value: '沈阳西',
        label: '沈阳西'
      }, {
        value: '长沙',
        label: '长沙'
      }, {
        value: '沈阳东',
        label: '沈阳东'
      }, {
        value: '奥泽里亚内',
        label: '奥泽里亚内'
      }, {
        value: '沃尔西诺',
        label: '沃尔西诺'
      }, {
        value: '马拉舍维奇',
        label: '马拉舍维奇'
      }, {
        value: '别雷拉斯特',
        label: '别雷拉斯特'
      }, {
        value: '蒲河',
        label: '蒲河'
      }, {
        value: '科夫罗夫-货',
        label: '科夫罗夫-货'
      }, {
        value: '杜伊斯堡',
        label: '杜伊斯堡'
      }],
      portStationOptions:[{
        value: '漠河口岸',
        label: '漠河口岸'
      },{
        value: '抚远口岸',
        label: '抚远口岸'
      },{
        value: '绥芬河口岸',
        label: '绥芬河口岸'
      },{
        value: '阿拉山口',
        label: '阿拉山口'
      },{
        value: '东兴口岸',
        label: '东兴口岸'
      },{
        value: '罗湖口岸',
        label: '罗湖口岸'
      },{
        value: '文锦渡口岸',
        label: '文锦渡口岸'
      }],
      customerOptions:[{
        value: '德迅公司',
        label: '德迅公司'
      },{
        value: '上海台骅货运代理有限公司沈阳分公司',
        label: '上海台骅货运代理有限公司沈阳分公司'
      },{
        value: '北京凯盛物流有限公司成都分公司',
        label: '北京凯盛物流有限公司成都分公司'
      },{
        value: '广州新亚运物流有限公司南京分公司',
        label: '广州新亚运物流有限公司南京分公司'
      },{
        value: '上海顺达物流有限公司青岛分公司',
        label: '上海顺达物流有限公司青岛分公司'
      },{
        value: '上海台驊貨代運營有限公司沈阳分公司',
        label: '上海台驊貨代運營有限公司沈阳分公司'
      }],
      customerServiceOptions:[{
        value: '韩旭昌',
        label: '韩旭昌'
      },{
        value: '张三',
        label: '张三'
      },{
        value: '李四',
        label: '李四'
      },{
        value: '王五',
        label: '王五'
      },{
        value: '赵六',
        label: '赵六'
      }],
      orderRules: {
        customerName: [
          {required: true, message: '请输入客户名称', trigger: 'change'}
          // {min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur'}
        ],
        customerMobile: [
          {required: true, message: '请输入客户联系人手机号', trigger: 'change'}
        ],
        customerLinkman: [
          {required: true, message: '请输入客户联系人手机号', trigger: 'change'}
        ],
        customerEmail: [
          {required: true, message: '请输入客户联系人邮箱', trigger: 'change'}
        ],
        customerServiceName: [
          {required: true, message: '请输入客服', trigger: 'change'}
        ],
        departureStationName: [
          {required: true, message: '请选择始发站', trigger: 'change'}
        ],
        portStationName: [
          {required: true, message: '请选择口岸站', trigger: 'change'}
        ],
        destinationStationName: [
          {required: true, message: '请选择目的站', trigger: 'change'}
        ],
        trainPlanTransportTime: [
          {required: true, message: '请选择计划发运日期', trigger: 'change'}
        ],
        containerSource: [
          {required: true, message: '请选择箱源', trigger: 'change'}
        ],
        useContainerType: [
          {required: true, message: '请选择用箱方式', trigger: 'change'}
        ],
        containerType: [
          {required: true, message: '请选择箱型', trigger: 'change'}
        ],
        containerNum: [
          {required: true, message: '请填写箱量', trigger: 'change'}
        ]
      },
      loading:false
    }
  },
  methods: {
    onSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        const orderData = this.order;
        if (valid) {
          // 存储用户信息
          this.loading = true
          const loginUserInfo = JSON.parse(localStorage.getItem('userInfo'));
          orderData.createOrgId = loginUserInfo.companyCode;
          axios.post("/api/bs-order/addOrder", orderData,{
            headers: {
              "Content-Type":"application/json"
            },
          }).then((res) =>{
            const resData = res.data;
            if (resData.code !== 200){
              this.loading = false
              this.resetForm('ruleForm')
              this.$message.error("下单失败！");
            }else {
              this.loading = false
              this.resetForm('ruleForm')
              console.log(this.order)
              this.$message({
                message: '下单成功',
                type: 'success'
              });
            }
          })
        } else {
          console.log('error submit!!');
          return false;
        }
      });
      console.log(this.order);
    },
    getSaveOrderData(){
      return {
        customerName: this.order.customerName,
        customerMobile: this.order.customerMobile,
        customerLinkman: this.order.customerLinkman,
        customerEmail: this.order.customerEmail,
        customerServiceName: this.order.customerServiceName,
        trainPlanTransportTime: this.order.trainPlanTransportTime,
        departureStationName: this.order.departureStationName,
        portStationName: this.order.portStationName,
        destinationStationName: this.order.destinationStationName
      }
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    }
  }
}
</script>

<style>
.order-main {
  margin-top: -2%;
}
.gradual {
  background: linear-gradient(90deg,rgba(15,117,227,.3),rgba(15,117,227,0));
  width: -moz-max-content;
  width: max-content;
  font-size: 14px;
}

</style>
